<template>
    <div>
        <div class="top">预约信息查询</div>
        <div class="main">
            <div class="spone">数据筛选</div>
            <el-divider />
            <div class="sptwo">
                <span>输入查询：</span> <el-input v-model="input" filterable clearable placeholder="姓名/手机/身份证号/订单号"
                    style="width: 190px; " />
                <!-- 下拉菜单 -->
                <span>体检状态：</span> <el-select v-model="selectvalue" class="m-2" filterable clearable placeholder="全部"
                    style="width: 80px;margin-right: 20px;" @change="changestatus">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        :disabled="item.disabled" />
                </el-select>
                <span>体检日期：</span>
                <!-- 日期选择器 -->
                <div class="demo-date-picker">
                    <div class="block">
                        <el-date-picker v-model="timer" type="date" placeholder="体检日期"
                            style="width: 140px; margin-right:200px" format="YYYY/MM/DD" value-format="YYYY/MM/DD"
                            @change="changeTemer" />
                    </div>
                </div>
                <div class="button1">
                    <el-button type="primary" @click="inquire">查询</el-button>
                    <el-button @click="resetting">重置</el-button>
                </div>
            </div>
            <el-divider />
            <div class="quotedPrice_title_right">
                <el-button class="delspan" @click="Isshows4">删除</el-button>
                <el-button class="leading-out" @click="Isshows5">修改状态</el-button>
            </div>
            <div class="spthree">
                <el-table ref="multipleTableRef" :data="getQuotePriceList" style="width: 100%;" :border="true"
                    :highlight-current-row="false" :cell-style="{ 'text-align': 'center', 'font-size': '12px' }"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#f9ffc', 'color': '#666' }"
                    @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40" />
                    <el-table-column property="name" label="姓名" width="70" />
                    <el-table-column property="sex" label="性别" width="55" />
                    <el-table-column property="tel" label="手机" width="105" />
                    <el-table-column property="cardid" label="身份证号码" width="150" />
                    <el-table-column property="checkContent" label="体检内容" width="100" />
                    <el-table-column property="checkInstitution" label="体检机构" width="110" />
                    <el-table-column property="checkData" label="体检日期" width="100" />
                    <el-table-column property="number" label="订单号" width="70" />
                    <el-table-column property="status" label="体检状态" width="85" />
                    <el-table-column property="operate" label="操作" width="140">
                        <template #default="scope" class="scope01">
                            <el-button class="button01" @click=IsShow3(scope.row.id)>修改状态</el-button>
                            <el-button class="button01" @click=IsShow1(scope.row.id)>删除数据</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination_Box">
                    <el-pagination :page-size="params._limit" v-model:current-page="pages" background
                        layout="prev, pager, next,jumper" :total="total" @current-change="changePage"
                        @size-change="handleSizeChange" />
                </div>
            </div>
        </div>
        <div class="delshow" v-if="show">
            <img src="https://img.51miz.com/Element/00/36/87/35/452c49a2_E368735_54703b13.png" alt="">
            <span class="span1">删除确认</span>
            <span class="span2">删除后无法恢复,亲，您确定要删除此条信息吗?</span>
            <div>
                <span @click="IsShow2">取消</span>
                <el-popconfirm title="亲，您不再考虑一下？" @confirm="delQuoted()">
                    <template #reference>
                        <span>确定</span>
                    </template>
                </el-popconfirm>
            </div>
        </div>
        <div class="delshow1" v-if="shows">
            <p class="xiugai">修改状态</p>
            <el-form :model="getQuotePriceList" label-width="120px" class="ml-5">
                <el-form-item label="" class="ml-6">
                    <p>目标状态:</p>
                    <el-radio-group v-model="radio1" class="ml-4">
                        <el-radio label="已体检" size="large">已体检</el-radio>
                        <el-radio label="失效" size="large">失效</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <el-divider />
            <div>
                <span @click="IsShow22">取消</span>
                <span @click="Edit">确定</span>
            </div>
        </div>
        <div class="delshow" v-if="showss">
            <img src="https://img.51miz.com/Element/00/36/87/35/452c49a2_E368735_54703b13.png" alt="">
            <span class="span1">删除确认</span>
            <span class="span2">删除后无法恢复,确定要删除此条信息吗?</span>
            <div>
                <span @click="IsShows2">取消</span>
                <el-popconfirm title="亲，您不再考虑一下？" @confirm="delQuoteds()">
                    <template #reference>
                        <span>确定</span>
                    </template>
                </el-popconfirm>
            </div>
        </div>
        <div class="delshow1" v-if="showsss">
            <p class="xiugai">修改状态</p>
            <el-form :model="getQuotePriceList" label-width="120px" class="ml-5">
                <el-form-item label="" class="ml-6">
                    <p>目标状态:</p>
                    <el-radio-group v-model="radio1" class="ml-4">
                        <el-radio label="已体检" size="large">已体检</el-radio>
                        <el-radio label="失效" size="large">失效</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <el-divider />
            <div>
                <span @click="IsShow33">取消</span>
                <span @click="Edits">确定</span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { ElTable } from 'element-plus'
import service from "../../utils/service";
import { ElMessage } from 'element-plus';
interface Idata {
    name: string,
    sex: string,
    tel: number,
    cardid: number,
    checkContent: string,
    checkInstitution: string,
    checkData: string,
    number: number,
    status: string,
    operate: string,
    id: number
}
// 数据查询
interface Iparam {
    _page?: number,
    _limit?: number,
    checkData?: string,
    status?: string,
}
let params = reactive<Iparam>({})
// 数据数量
const total = ref<number>()
// 定义数组数据
const getQuotePriceList = reactive<Idata[]>([]);

const pages = ref<number>(1)
const handleSizeChange = () => {
    params._page = pages.value

}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const toggleSelection = (rows?: Idata[]) => {
    if (rows) {
        rows.forEach((row) => {
            // TODO: improvement typing when refactor table
            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
            // @ts-expect-error
            multipleTableRef.value!.toggleRowSelection(row, undefined)
        })
    } else {
        multipleTableRef.value!.clearSelection()
    }
}
// 订单状态
const selectvalue = ref<string>()
const options = [
    {
        value: '待支付',
        label: '待支付',
    },
    {
        value: '已过期',
        label: '已过期',
        disabled: true,
    },
    {
        value: '已体检',
        label: '已体检',
    },
    {
        value: '申请退款中',
        label: '申请退款中',
    },
    {
        value: '退款中',
        label: '退款中',
    },
    {
        value: '已退款',
        label: '已退款',
    },
    {
        value: '已取消',
        label: '已取消',
    },
]
// 发请求获取数据
const getQuotePrice = (params: Iparam) => {
    service({
        url: "/hospitalCotent?q=" + input.value,
        method: "get",
        params
    }).then(res => {
        getQuotePriceList.length = 0
        res.data.forEach((item: Idata) => {
            getQuotePriceList.push(item)
        });
    })
}
// 获取总数据条
const getQuotePriceNum = (params: Iparam) => {
    service({
        url: "/hospitalCotent?q=" + input.value,
        method: "get",
        params
    }).then(res => {
        total.value = res.data.length
        console.log(total.value);
    })
}
let input = ref<string>("")
let timer = ref<string>("")
// 搜索后重新渲染
const inquire = () => {
    if (!timer.value) {
        if (!input.value) {
            if (!selectvalue.value) {
                params = {}
                getQuotePriceNum(params)
                params._page = pages.value
                params._limit = 10
                getQuotePrice(params)
            } else {
                params = {}
                params.status = selectvalue.value
                getQuotePriceNum(params)
                params._page = pages.value
                params._limit = 10
                getQuotePrice(params)
            }
        } else {
            if (!selectvalue.value) {
                params = {}
                getQuotePriceNum(params)
                params._page = pages.value
                params._limit = 10
                getQuotePrice(params)
            } else {
                params = {}
                params.status = selectvalue.value
                getQuotePriceNum(params)
                params._page = pages.value
                params._limit = 10
                getQuotePrice(params)
            }
        }
    } else {
        if (!input.value && !selectvalue.value) {
            params = {}
            params.checkData = timer.value
            getQuotePriceNum(params)
            params._page = pages.value
            params._limit = 10
            getQuotePrice(params)
        } else {
            params = {}
            params.checkData = timer.value
            params.status = selectvalue.value
            getQuotePriceNum(params)
            params._page = pages.value
            params._limit = 10
            getQuotePrice(params)
        }
    }
}
inquire();
//分页改变页面
const changePage = (value: number) => {
    params._page = value;
    inquire()
}
//预约状态查询
const changestatus = () => {
    params = {}
    params.status = selectvalue.value
    getQuotePriceNum(params)
    params._limit = 10
    params._page = pages.value
    getQuotePrice(params)
}
// 重置
const resetting = () => {
    input.value = ''
    timer.value = ''
    selectvalue.value = ''
    inquire()
}
const changeTemer = () => {
    params = {}
    params.checkData = timer.value
    getQuotePriceNum(params)
    params._limit = 10
    params._page = pages.value
    getQuotePrice(params)
}

// 删除单条数据
const show = ref<boolean>(false)
const IsShow2 = () => {
    show.value = false
}
let ids = ref<number>()
const IsShow1 = (id: number) => {
    show.value = true
    ids.value = id
}
const delQuoted = () => {
    service({
        url: `/hospitalCotent/${ids.value}`,
        method: "DELETE",
    }).then(res => {
        ElMessage({
            message: '删除成功！',
            type: 'success',
        })
        getQuotePrice(params)
        show.value = false
    })
}
// 修改单条数据
const radio1 = ref('已体检')
const shows = ref<boolean>(false)
const IsShow22 = () => {
    shows.value = false
}
const IsShow3 = (id: number) => {
    shows.value = true
    ids.value = id
}
const Edit = () => {
    service({
        url: `/hospitalCotent/${ids.value}`,
        method: "PATCH",
        data: {
            status: radio1.value

        }

    }).then(res => {
        console.log("radio1", radio1);
        console.log("res.data", res.data);
        console.log("getQuotePriceList", getQuotePriceList)
        shows.value = false
        getQuotePrice(params)
    })
}

// 删除多个数据
const multipleSelection = reactive<Idata[]>([])
const multipleArr = reactive<number[]>([])
const handleSelectionChange = (val: Idata[]) => {
    multipleSelection.length = 0
    multipleSelection.push(...val)
    multipleArr.length = 0
    multipleSelection.forEach(item => {
        multipleArr.push(item.id)
    })
    console.log(multipleArr);
}


const showss = ref<boolean>(false)
const Isshows4 = () => {
    if (multipleArr.length != 0) {
        showss.value = true
    }
}
const IsShows2 = () => {
    showss.value = false
}

const delQuoteds = () => {
    multipleArr.forEach(item => {
        service({
            url: `/hospitalCotent/${item}`,
            method: "DELETE",
        }).then(res => {
            ElMessage({
                message: '删除成功！',
                type: 'success',
            })
            getQuotePrice(params)
            showss.value = false
        })
    })
    showss.value = false
}

// 修改多个数据
const showsss = ref<boolean>(false)
const Isshows5 = () => {
    if (multipleArr.length != 0) {
        showsss.value = true
    }
}
const IsShow33 = () => {
    showsss.value = false
}
const Edits = () => {
    multipleArr.forEach(item => {
        service({
            url: `/hospitalCotent/${item}`,
            method: "PATCH",
            data: {
                status: radio1.value

            }
        }).then(res => {
            getQuotePrice(params)
            showsss.value = false
        })
    })
    showsss.value = false
}
</script>

<style lang="scss" scoped>
.top {
    height: 50px;
    background-color: white;
    line-height: 50px;
    padding-left: 10px;
}

.main {
    height: 100%;
    background-color: white;
    margin-top: 20px;
}

.spone {
    font-size: 14px;
    font-weight: 700;
    box-sizing: border-box;
    padding-top: 20px;
    padding-left: 20px;
}

.sptwo {
    height: 50px;
    font-size: 12px;
    display: flex;
    align-items: center;
    padding-left: 20px;

}

.delspan {
    width: 80px;
}

.leading-out {
    width: 80px;
    margin-left: 20px;
}

.spthree {
    margin-top: 20px;
}

.el-select {
    font-size: 12px;
}

.el-input {
    margin-right: 20px;
}

.demo-date-picker {
    display: flex;
    /* width: 100%; */
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.button01 {
    border: 0px;
    background-color: transparent;
    font-size: 12px;
    width: 50px;
    height: 20px;
    display: inline;
    color: aquamarine;
}

.delshow {
    border-width: 0px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 447px;
    height: 262px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 5px;
    -moz-box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.349019607843137);
    -webkit-box-shadow: 2px 2px 14px rgb(0 0 0 / 35%);
    box-shadow: 2px 2px 14px rgb(0 0 0 / 35%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    align-items: center;
}

.delshow1 {
    border-width: 0px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 447px;
    height: 262px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    border-radius: 5px;
    -moz-box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.349019607843137);
    -webkit-box-shadow: 2px 2px 14px rgb(0 0 0 / 35%);
    box-shadow: 2px 2px 14px rgb(0 0 0 / 35%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    align-items: center;
}

.delshow img {
    width: 63px;
    height: 63px;
}

.delshow .span1 {
    padding: 3px 10px;
    font-size: 16px;
    color: #333333;
}

.delshow .span2 {
    font-size: 13px;
    color: #999999;
    padding: 10px;
}

.delshow div {
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.delshow div span {
    width: 83px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    margin: 10px;
    cursor: pointer;
}

.delshow div span:nth-child(1) {
    background-color: #E8F2FF;
    color: #197CFEEA;
}

.delshow div span:nth-child(2) {
    background-color: #006EFF;
    color: #fff;
}

.delshow1>.xiugai {
    margin-bottom: 50px;
    margin-left: -350px;
    font-weight: 700;
}

.delshow1 .ml-6 {
    margin-bottom: 20px;
    margin: 0 -20px;
}

.delshow1 .ml-6 p {
    margin-right: 20px;
}

.delshow1 .ml-5 {
    width: 100%;
    display: flex;
}

.delshow1 div span {
    display: inline-block;
    width: 83px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 4px;
    margin: 10px;
    cursor: pointer;
}

.delshow1 div span:nth-child(1) {
    background-color: #E8F2FF;
    color: #197CFEEA;
}

.delshow1 div span:nth-child(2) {
    background-color: #006EFF;
    color: #fff;
}

.el-inputs1 {
    margin-left: 10px;
}
</style>